<template>
  <div class="height100">
    <el-row type="flex" align="middle" class="my-row">
      <el-col :span="12">
        <el-row style="margin-left: 20px">
          <el-col v-if="collapse">
            <i class="el-icon-s-unfold bigIcon" @click="collapseOpt(1)"></i>
          </el-col>
          <el-col v-else>
            <i class="el-icon-s-fold bigIcon" @click="collapseOpt(0)"></i>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12"></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Header',
  components: {},
  props: [],
  data() {
    return {
      firstRowStyle: null
    }
  },
  computed: {
    logoStyle() {
      return 'color: ' + this.$store.getters['base/getMenuColor']
    },
    collapse() {
      return this.$store.state.base.collapse
    }
  },
  watch: {
    collapse: {
      handler() {
        if (this.collapse) {
          this.$store.commit('base/setAdminAsideWidth', 64)
        } else {
          this.$store.commit(
            'base/setAdminAsideWidth',
            this.$store.state.base.admin.defaultWidth
          )
        }
      },
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    collapseOpt(val) {
      const flag = val === 0
      this.$store.commit('base/setCollapse', flag)
    }
  }
}
</script>

<style scoped>
.my-row {
  height: 100%;
}
.my-line {
  color: #a5a5a9;
}
</style>
